<template>
  <div>
    <!-- 科研成果概况 -->
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">科研成果概况</span>
        </div>
        <Achievement/>
      </el-card>
    </div>
    <!-- 科研趋势 -->
    <div class="card-box">
      <el-card class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">科研趋势</span>
        </div>
        <Trend :info="info"/>
      </el-card>
    </div>
    <!-- 涉及技术领域、领域变化分析 -->
    <div class="card-box">
      <el-card class="elcard" style="flex:.4;align-self:normal;margin-right:10px;">
        <div slot="header" class="hd clearfix">
          <span class="tit">涉及技术领域</span>
        </div>
        <ChartOne ref="chartOne"/>
      </el-card>
      <el-card class="elcard" style="flex:.6;align-self:normal;margin-left:10px;">
        <div slot="header" class="hd clearfix">
          <span class="tit">领域变化分析</span>
        </div>
        <ChartTwo/>
      </el-card>
    </div>
    <!-- 学术领域分析、学术关键词云 -->
    <div class="card-box">
      <el-card v-show="!hideChartThree" class="elcard" style="flex:.6;align-self:normal;margin-right:20px;">
        <div slot="header" class="hd clearfix">
          <span class="tit">学术领域分析</span>
        </div>
        <ChartThree @chartThreeNoData="chartThreeNoData"/>
      </el-card>
      <el-card v-show="!hideWordCloud" class="elcard" style="flex:.4;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">学术关键词云</span>
        </div>
        <WordCloud ref="wordCloud" @wordCloudNoData="wordCloudNoData"/>
      </el-card>
    </div>
  </div>
</template>

<script>
import Achievement from './Achievement'
import Trend from './Trend'
import ChartOne from './ChartOne'
import ChartTwo from './ChartTwo'
import ChartThree from './ChartThree'
import WordCloud from './WordCloud'
export default {
  props: {
    info: {
      type: Object,
    }
  },
  components: {
    Achievement,
    Trend,
    ChartOne,
    ChartTwo,
    ChartThree,
    WordCloud
  },
  data() {
    return {
      hideChartThree: false,
      hideWordCloud: false
      // chartThree
    }
  },
  methods: {
    init() {
    },
    chartThreeNoData(data) {
      this.hideChartThree = data
    },
    wordCloudNoData(data) {
      this.hideWordCloud = data
    },
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    this.$off('chartThreeNoData')
    this.$off('wordCloudNoData')
  }
}
</script>

<style lang="scss" scoped>

</style>